import React from 'react'
import { File, message, Button, Statistic, Row, Col } from 'antd'
import { FileOutlined } from '@ant-design/icons'

import { uploadStudentList, exportStudentModel } from './../../api/student'

const downloadStuModel = () => {
  window.open('http://10.20.159.78:3333/api/student/exportStudentModel')
}

const UploadFile = (e) => {
  const fileName = e.target.files[0] //获得文件对象
  // console.log(fileName)
  if (fileName !== undefined) {
    const file_typename = fileName.name.substring(
      //筛选出上传文件的后缀
      fileName.name.lastIndexOf('.')
    )
    // console.log(file_typename)
    // console.log(fileName)
    if (file_typename === '.xlsx' || file_typename === '.xls') {
      var form = new FormData() // FormData 对象
      form.append('file', fileName) // 文件对象
      // console.log(form)
      uploadStudentList(form).then((res) => {
        if (res.data.code === 200) {
          message.success('上传成功')
        }
      }) //后端通过multer模块接受文件对象
    } else {
      message.warning('请选择正确的文件类型')
      // console.log('请选择正确的文件类型！')
    }
  } else {
    message.error('请选择正确的文件！')
    // console.log('请选择正确的文件！')
  }
}

function infoEntering() {
  return (
    <>
      <Row gutter={16}>
        <Col span={12}>
          <Statistic title="学生总数" value={1128} />
        </Col>
        <Col span={12}>
          <Statistic title="学生新增占比" value={93} suffix="/ 100" />
        </Col>
      </Row>
      <input type="file" onChange={(e) => UploadFile(e)} />
      <Button type="primary" onClick={downloadStuModel} icon={<FileOutlined />}>
        下载学生名单列表模板
      </Button>
    </>
  )
}

export default infoEntering
